<!--
 * @Author: YWY
 * @Date: 2022-02-22 16:17:42
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-07 08:23:37
-->

<template>
  <div class="header">
    <!-- 页面头部区域 -->
    <van-nav-bar :title="title">
      <template #left>
        <img
          src="@/assets/image/sns-logo2.png"
          alt=""
          id="logo"
          @click="toIndex"
        />
      </template>
      <template #right>
        <!-- 搜索图标 -->
        <van-icon name="search" color="white" @click="searchShow" />
        <div class="userpic_container">
          <!-- 登录前状态 -->
          <van-icon
            name="contact"
            color="white"
            @click="toLogin"
            v-if="!logState"
          />
          <!-- 登陆后状态 -->
          <img
            v-if="logState"
            @click="functionBtnDis = true"
            @blur="functionBtnDis = false"
            :src="user.avatar"
            class="user_pic_small"
            tabindex="0"
          />
        </div>
      </template>
    </van-nav-bar>
    <!-- 头像图标功能按钮栏 -->
    <transition name="van-slide-right">
      <div v-if="functionBtnDis" class="header_function_buttons">
        <ul>
          <li @click="toWritePage"><van-icon name="edit" />写文章</li>
          <li @click="toUserPage"><van-icon name="user-o" />我的资料</li>
        </ul>
      </div>
    </transition>
  </div>
  <!-- 搜索区域 -->
  <div>
    <transition name="van-slide-down">
      <div v-show="searchDis" class="search">
        <div class="search_box">
          <div class="search_left_box">
            <div class="search_icon">
              <van-icon name="search" color="gray" @click="searchShow" />
            </div>
            <!-- 输入内容 -->
            <div class="search_input_box">
              <input
                type="text"
                v-model="inputValue"
                ref="inputEle"
                class="search_input"
                @keydown="sendSearchValueEnter"
              />
              <!-- 清除搜索框 -->
              <van-icon
                name="clear"
                color="gray"
                @click="clearSearchValue"
                class="search_button_clear"
              />
            </div>
          </div>
          <!-- 关键词联想展示区 -->
          <div v-show="association" class="search_assc">
            <p
              v-for="item in associationList"
              :key="item.sa"
              @click="sendSearchValueClick"
            >
              {{ item.q }}
            </p>
          </div>
        </div>
        <button class="search_cancel" @click="searchHide">取消</button>
      </div>
    </transition>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from "@vue/runtime-core";
import { mainStore } from "@/store/index.js";
import { userStore } from "@/store/userdata.js";
import { searchStore } from "@/store/searchData.js";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Header",
  props: {
    title: {
      default: "首页",
      type: String,
    },
  },
  setup() {
    const main = mainStore();
    const search = searchStore();
    const user = userStore();
    const router = useRouter();
    const searchDis = ref(false);
    const functionBtnDis = ref(false);
    const { inputValue, searchValue, associationList, association, userList } =
      storeToRefs(search);
    const { logState } = storeToRefs(main);

    const toIndex = () => {
      router.push({ path: "/home" });
    };

    const toLogin = () => {
      router.push({ path: "/login" });
    };

    const toUserPage = () => {
      router.push({ path: "/userhome" });
    };

    const toWritePage = () => {
      router.push({ path: "/publish" });
    };

    // 隐藏搜索框
    const searchHide = () => {
      searchDis.value = false;
      association.value = false;
    };

    //清除关键词
    const clearSearchValue = () => {
      console.log("清除关键词");
      inputValue.value = null;
      association.value = false;
    };

    // 监听用户搜索框操作
    let limit = null;
    const sendSearchValueEnter = (e) => {
      clearTimeout(limit);
      limit = setTimeout(() => {
        if (
          e.keyCode === 13 &&
          inputValue.value &&
          !/^\s*$/.test(inputValue.value)
        ) {
          search.init(inputValue.value);
          router.push({ path: `/searchpage/${inputValue.value}` });
          association.value = false;
        } else {
          search.loadKeywordAssociation(inputValue.value);
        }
      }, 300);
    };

    //监听用户点击关键词联想搜索
    let limit1 = null;
    const sendSearchValueClick = (e) => {
      clearTimeout(limit1);
      limit1 = setTimeout(() => {
        console.log("点击了关键词联想列表");
        search.init(e.target.textContent);
        router.push({ path: `/searchpage/${e.target.textContent}` });
        association.value = false;
      }, 300);
    };

    return {
      logState,
      main,
      user,
      inputValue,
      searchDis,
      association,
      searchValue,
      associationList,
      functionBtnDis,
      userList,
      toIndex,
      toLogin,
      toUserPage,
      toWritePage,
      searchHide,
      clearSearchValue,
      sendSearchValueEnter,
      sendSearchValueClick,
    };
  },
  methods: {
    searchShow() {
      console.log(this.$refs.inputEle);
      this.searchDis = true;
      this.$refs.inputEle.focus();
    },
  },
});
</script>

<style lang='less'>
#logo {
  width: 130px;
  height: 40px;
  top: 6px;
  left: -6px;
  position: relative;
  color: #00b43c;
}

.header {
  .van-nav-bar__title {
    font-size: 17px;
    color: white;
  }
  .van-nav-bar {
    background-color: #4662d9;
  }
  .van-icon {
    font-size: 30px;
    margin-left: 10px;
  }
  .user_pic_small {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    right: -5px;
    top: 3px;
    background-color: white;
  }
  .userpic_container {
    width: 35px;
    margin-left: 5px;
  }
  .header_function_buttons {
    background-color: white;
    position: absolute;
    right: 0;
    color: rgb(134, 144, 156);
    z-index: 10;
    width: 120px;
    border: 1px solid rgb(211, 211, 211);
    border-right: none;
    border-radius: 3px;
    li {
      font-size: 16px;
      text-align: left;
      margin: 10px 0px;
      margin-right: 5px;
      .van-icon {
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
        color: rgb(134, 144, 156);
      }
      :active {
        background-color: gray;
      }
    }
  }
}

.header-user {
  font-size: 15px;
  color: white;
  font-weight: 500;
  margin-left: 10px;
}

@input_width: 70vw;
.search {
  position: absolute;
  width: 100vw;
  top: 0;
  z-index: 11;
  background-color: rgb(70, 98, 217);
  height: var(--van-nav-bar-height);
  display: flex;
  justify-content: space-around;
  .search_box {
    background-color: white;
    width: @input_width;
    margin: 10px auto;
    // border-radius: 5px;
    border: 1px solid rgb(70, 98, 217);
    height: 28px;
    .search_left_box {
      height: inherit;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      // border: 1px solid blac k;
    }
  }
  .search_icon {
    // border: 1px solid black;
    display: flex;
    align-items: center;
    padding-right: 10px;
  }
  .search_input_box {
    display: flex;
    // border: 1px solid black;
    justify-content: space-between;
    align-items: center;
  }
  .search_input {
    align-content: center;
    border: none;
    padding: 0;
    // border: 1px solid black;
    width: 190px;
  }
  .search_button_clear {
    // border: 1px solid black;
    display: flex;
    align-items: center;
  }
  .search_assc {
    width: @input_width;
    margin: 0 auto;
    padding-top: 1px;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: white;
    padding-left: 27px;
    text-align: left;
    border: 1px solid rgb(70, 98, 217);
    box-sizing: border-box;
    border-top: none;
    p {
      font-size: 14px;
      margin: 5px 0;
    }
  }
  .search_cancel {
    border: none;
    background-color: transparent;
    color: white;
    margin-right: 10px;
  }
}
</style>